<div id="content_header">
  <h3>Enrollment Student</h3>
</div>
<!-- Course.Code/Term.Number-Term.Year/DayClass/TimeClass -->
<!-- MODAL CONFIRMATION -->
<script type="text/ng-template" id="srConfirmation.html">
  <div class="modal-header">
    <h3 class="modal-title">Enrollment Confirmation</h3>
  </div>
  <div class="modal-body">
    <p>Are you sure want to add <br/> <strong>{{ currStudent.FullName }}</strong> <br/> into <br/> <b>{{ course.CourseName }}</b></p>
    <p>
      <h5>Course Info</h5>
      <hr>
      <dl>
        <dt>Course Level</dt>
        <dd>{{ course.Course.CourseLevel.Code }}</dd>
        <dt>Start Date</dt>
        <dd>{{ course.StartDate | date: 'mediumDate' }}</dd>
        <dt>Teacher Type</dt>
        <dd>TeacherTypes[course.Course.TeacherType].Code</dd>
        <dt>Suffix</dt>
        <dd>{{ course.Suffix }}</dd>
      </dl>
    </p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
    <button class="btn btn-primary" ng-click="confirm('classes.list')">Confirm</button>
    <button class="btn btn-success" ng-click="confirm('students.list')">Confirm & Add More</button>
  </div>
</script>

<!-- FORM SEARCH STUDENTS -->
<div class="row" ng-hide="srNew.Student.Id">
  <form role="form" ng-submit="searchStudent()">
    <div class="form-group">
      <div class="input-group">
        <input type="text" class="form-control" id="" placeholder="Input Student ID or Student Name and press enter to search" ng-model="searchText">
        <span class="input-group-btn">
          <button type="submit" class="btn btn-primary"><i class="simple-icon-magnifier"></i> Search</button>
        </span>
      </div>
    </div>
  </form>
</div>

<!-- RESULTS BY SEARCHING STUDENT NAME / SID  -->
<div class="row" ng-if="students.length > 0" ng-hide="srNew.Student.Id">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>SID</th>
        <th>Last Course Taken</th>
        <th>Last Placement Test</th>
      </tr>
    </thead>
    <tbody>
      <tr dir-paginate="student in students | itemsPerPage: pagesize" total-items="totalItems">
        <td>
          <span class="dropdown">
            <a href class="dropdown-toggle">
              {{ student.FullName }}
            </a>
            <ul class="dropdown-menu">
              <li role="presentation" class="dropdown-header">Action</li>
              <li ng-if="!student.PlacementTest"><a href ui-sref="pt.new({ id:student.Id })">Register to PT</a></li>
              <li ng-if="!student.Enrollment"><a href ui-sref="sr.new({ id:student.Id })">Register to Course</a></li>
            </ul>
          </span>
        </td>
        <td ng-bind-html="student.SID | makeBold:searchKey"></td>
        <td><a href ui-sref="sr.new({ id:student.Id })">Enroll</a></td>
        <td>August, 02 2014 - Pre Elementary 1</td>
      </tr>
    </tbody>
  </table>
  <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
    <div class="panel panel-default">
      <div class="panel-heading">Student Detail</div>
      <div class="panel-body">
        <dl>
          <dt>Student Name</dt>
          <dd>{{ currStudent.FullName }}</dd>
          <dt>SID</dt>
          <dd>{{ currStudent.SID }}</dd>
          <dt>Entry Score</dt>
          <dd>
            {{ currStudent.EntryScore }}
            <!-- <a><i>TODO: edit Entry Score</i></a> -->
          </dd>
          <dt>Latest Enrollment</dt>
          <dd>
            {{ currStudent.LatestEnrollment.CourseSchedule.CourseName }} <br>
            <span class="label" ng-class="CourseCompletionStatus[currStudent.LatestEnrollment.CourseCompletionStatus].LabelClass">{{ CourseCompletionStatus[currStudent.LatestEnrollment.CourseCompletionStatus].Label }}</span>
          </dd>
          <dt>Latest Placement Test</dt>
          <dd>
            <span ng-if="currStudent.LatestPlacementTest">
              {{ currStudent.LatestPlacementTest.DateTime  | date:'medium' }}{{ (currStudent.LatestPlacementTest.CourseLevel)? '/'+currStudent.LatestPlacementTest.CourseLevel.Name : '' }}
            </span>
            <span ng-if="!currStudent.LatestPlacementTest">
              <a ui-sref="pt.new({ id:currStudent.Id })">No Valid PT, Register to PT</a>
            </span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
    <form ng-show="srNew.Student.Id" name="srForm" role="form" ng-submit="openModal()">
      <div class="form-group" ng-class="{ 'has-error': errors.Student}" ng-hide="true">
        <!-- <label for="">Student</label> -->
        <h5 >
          <b><u>{{ currStudent.FullName }} - {{ currStudent.SID }}</u></b>
          <small><a href ng-click="resetStudent()">Change Student</a></small>
        </h5>
      </div>

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
          <div class="form-group">
            <label for="CourseType">Course Type</label>
            <select name="CourseType" class="form-control" id="CourseType" ng-model="filterTable.CourseType.Id" ng-options="coursetype.Id as coursetype.Code +' - '+ coursetype.Name for coursetype in coursetypes" required ng-disabled="termSelected" ng-change="callTerm()">
              <option value="" ng-hide="filterTable.CourseType.Id">Select a Course Type.</option>
            </select>
          </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
          <div class="form-group">
            <label for="TermId">Term</label>
            <div class="input-group">
              <select name="TermId" class="form-control" id="TermId" ng-model="filterTable.Term.Id" ng-options="term.Id as formatTerm(term) group by term.Year for term in terms" required ng-disabled="termSelected">
                <option value="" ng-hide="filterTable.Term.Id">Select Term.</option>
              </select>
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary" ng-click="showTable()"><i class="simple-icon-magnifier"></i> Search</button>
                <button type="button" class="btn btn-default" ng-click="resetTable()"><i class="simple-icon-refresh"></i> Reset</button>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="row" ng-show="termSelected">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th class="text-center">#</th>
                <th style="text-align:center; vertical-align:middle;" ng-repeat="dayclass in dayclasses">
                  {{ dayclass.DayRange }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="time in timeclasses">
                <th style="text-align:center; vertical-align:middle;">{{ time.StartTime | date: 'shortTime'  }} - {{ time.EndTime | date: 'shortTime' }}</th>
                <td ng-repeat="dayclass in dayclasses">
                  <div>
                    <ul class="list-group" ng-if="courseArray[time.Id][dayclass.Id].status != 0">
                      <li class="list-group-item" ng-repeat="courseschedule in courseArray[time.Id][dayclass.Id].content">
                        <label event-focus event-focus-id="srCreateNote">
                          <input type="radio" ng-model="srNew.CourseSchedule.Id" ng-value="courseschedule.Id">
                          <!-- {{ courseschedule.CourseName }} -->
                            <b>{{ courseschedule.Course.CourseLevel.Code }}</b>-
                            <b>{{ courseschedule.Suffix ? courseschedule.Suffix : '-' }}</b>/
                            {{ TeacherTypes[courseschedule.Course.TeacherType].Code }}/
                            {{ courseschedule.TimeClass.StartTime | date: 'shortTime'  }} - {{ courseschedule.TimeClass.EndTime | date: 'shortTime' }}/
                            <b>({{ courseschedule.PaidEnrollmentCount }})</b>
                        </label>
                      </li>
                    </ul>
                    <!-- <table class="table table-hover table-bordered">
                      <thead>
                        <tr>
                          <th>Course</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody ng-if="courseArray[time.Id][dayclass.Id].status != 0">
                        <tr ng-repeat="courseschedule in courseArray[time.Id][dayclass.Id].content">
                          <td>
                            <b>{{ courseschedule.Course.CourseLevel.Code }}</b> /
                            <b>{{ courseschedule.Suffix ? courseschedule.Suffix : '-' }}</b> /
                            {{ courseschedule.Classroom ? courseschedule.Classroom.Code : '-' }} /
                            {{ courseschedule.Staffs[0] ? courseschedule.Staffs[0].Code : '-' }} /
                            {{ TeacherTypes[courseschedule.Course.TeacherType].Code }} -
                            <b>({{ courseschedule.EnrollmentCount }})</b>
                          </td>
                          <td>
                            <input type="radio" ng-model="srNew.CourseSchedule.Id" ng-value="courseschedule.Id">
                          </td>
                        </tr>
                      </tbody>
                    </table> -->
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

          <div class="form-group">
            <label for="Note">Note</label>
            <input type="text" id="srCreateNote" ng-model="srNew.Note" class="form-control">
          </div>

          <div class="row">
            <div class="col-md-9">
              <error-widget field="errors.Student" class="text-danger"></error-widget>
            </div>
            <div class="col-md-3 text-right">
              <a ui-sref="^.list" class="btn btn-default">Cancel</a>
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>
      </div>

    </form>
  </div>
</div>